{% extends "bash.html" %}
{% load static %}
{% block content %}

    <form action="{% url 'index:virtual' %}" method="get" id="virtualfrom">
    {% csrf_token %}
        <div class="input-group line left">
            <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
            {{ infos.s }}
        </div>
        <div class="input-group line left">
            <span class="input-group-addon"><i class="icon-edit"></i></span>
            {{ infos.t }}
        </div>
        <button class="btn btn-primary" type="submit" form="virtualfrom"><span class="glyphicon glyphicon-search"></span></button>
    </form>


    <br/><br/>
    <table class="table table-bordered table-striped text-center bg-info" id="show_number">
    <thead>
    <tr class="info">
        <th class="text-center">IP地址</th>
        <th class="text-center">MAC</th>
        <th class="text-center">主机名</th>
        <th class="text-center">CPU</th>
        <th class="text-center">内存</th>
        <th class="text-center">硬盘</th>
        <th class="text-center">宿主服务器</th>
        <th class="text-center">操作系统</th>
        <th class="text-center">操作</th>
    </tr>
    </thead>
    <tbody>
        {% for in_show_value in pages.object_list %}
            <tr>
                <td id="{{ in_show_value.2 }}_1">{{ in_show_value.1 }}</td>
                <td id="{{ in_show_value.2 }}_2">{{ in_show_value.2 }}</td>
                <td id="{{ in_show_value.2 }}_3">{{ in_show_value.3 }}</td>
                <td id="{{ in_show_value.2 }}_4">{{ in_show_value.4 }}</td>
                <td id="{{ in_show_value.2 }}_5">{{ in_show_value.5 }}</td>
                <td id="{{ in_show_value.2 }}_6">{{ in_show_value.6 }}</td>
                <td id="{{ in_show_value.2 }}_7">{{ in_show_value.7 }}</td>
                <td id="{{ in_show_value.2 }}_8">{{ in_show_value.8 }}</td>
                <td id="{{ in_show_value.2 }}_9" hidden="hidden">{{ in_show_value.9 }}</td>
                <td>
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit"data-whatever="{{ in_show_value.2 }}">编辑</a>
                    <a href="#" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#add"data-whatever="添加">添加</a>
                    <a href="#" class="btn btn-primary btn-sm" onclick="crap(this)" id="{{ in_show_value.0 }}">删除</a>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>

    <!--添加-->
    <div class="modal fade" id="add" tabindex="-1" role="dialog" aria-labelledby="add11">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" >添加</h4>
                </div>
                <div class="modal-body">
                    <ul>
                        <li>
                            <label><span>IP地址</span></label>
                            <input type="text" placeholder="**必填" id="add_ip"/>
                        </li>
                        <li>
                            <label><span>MAC</span></label>
                            <input type="text" placeholder="**必填格式   xx:xx:xx:xx:xx:xx" id="add_mac"/>
                        </li>
                        <li>
                            <label><span>CPU</span></label>
                            <input type="text" placeholder="核心数 or 具体型号" id="add_cpu"/>
                        </li>
                        <li>
                            <label><span>内存</span></label>
                            <input type="text" placeholder="内存大小" id="add_memony"/>
                        </li>
                        <li>
                            <label><span>硬盘</span></label>
                            <input type="text" placeholder="硬盘大小" id="add_harddisk"/>
                        </li>
                        <li>
                            <label><span>主机名</span></label>
                            <input type="text" placeholder="**必填" id="add_name"/>
                        </li>
                        <li>
                            <label><span>操作系统</span></label>
                            <input type="text" placeholder="选填" id="add_system"/>
                        </li>
                        <li>
                            <label><span>宿主服务器</span></label>
                            <input type="text" placeholder="所属服务器地址" id="add_hostname"/>
                        </li>
                        <li>
                            <label><span>备注</span></label>
                            <input type="text" placeholder="备注" id="add_remarks"/>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-sm" onclick="UpdataUser(this)">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--修改-->
    <div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel1">编辑</h4>
                </div>
                <div class="modal-body">
                   <ul>
                        <li>
                            <label><span>IP地址</span></label>
                            <input type="text" placeholder="**必填" id="edit_ip" readonly="readonly"/>
                        </li>
                        <li>
                            <label><span>MAC</span></label>
                            <input type="text" placeholder="**必填" id="edit_mac" readonly="readonly" />
                        </li>
                        <li>
                            <label><span>CPU</span></label>
                            <input type="text" placeholder="核心数 or 具体型号"  id="edit_cpu"/>
                        </li>
                        <li>
                            <label><span>内存</span></label>
                            <input type="text" placeholder="内存大小" id="edit_memony"/>
                        </li>
                        <li>
                            <label><span>硬盘</span></label>
                            <input type="text" placeholder="硬盘大小" id="edit_harddisk"/>
                        </li>
                        <li>
                            <label><span>主机名</span></label>
                            <input type="text" placeholder="**必填" id="edit_name"/>
                        </li>
                        <li>
                            <label><span>操作系统</span></label>
                            <input type="text" placeholder="选填" id="edit_system"/>
                        </li>
                        <li>
                            <label><span>宿主服务器</span></label>
                            <input type="text" placeholder="所属服务器地址" id="edit_hostname"/>
                        </li>
                       <li>
                           <label><span>备注</span></label>
                            <input type="text" placeholder="所属服务器地址" id="edit_remarks"/>
                       </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default btn-sm" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary btn-sm" data-dismiss="modal" onclick="editUser()">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div>
    <ul class="pagination pagination-lg right">
        {% if pages.has_previous %}
            <li><a href="{% url 'index:virtual' %}?p={{ pages.number|add:'-1' }}&s={{ s }}&t={{ t }}">&laquo;</a></li>
        {% endif %}
        {% for page in pages.paginator.page_range %}
            {% if pages.number == page %}
                <li class="active"><a href="{% url 'index:virtual' %}?&p={{ page }}&s={{ s }}&t={{ t }}">{{ page }}</a></li>
            {% elif pages.number|add:'-1' == page or pages.number|add:'1' == page%}
                <li><a href="{% url 'index:virtual' %}?&p={{ page }}&s={{ s }}&t={{ t }}">{{ page }}</a></li>
            {% elif pages.number|add:'-2' == page or pages.number|add:'2' == page%}
                <li><a href="{% url 'index:virtual' %}?&p={{ page }}&s={{ s }}&t={{ t }}">{{ page }}</a></li>
            {% endif %}
        {% endfor %}
        {% if pages.has_next %}
            <li><a href="{% url 'index:virtual' %}?p={{ pages.number|add:'1' }}&s={{ s }}&t={{ t }}">&raquo;</a></li>
        {% endif %}
    </ul>
    </div>


{% endblock content %}

{% block script %}
    $('#add').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var recipient = button.data('whatever');
        var modal = $(this);
        modal.find('.modal-title').text('' + recipient);
    });


    $('#edit').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget) // Button that triggered the modal
        var recipient = button.data('whatever');// Extract info from data-* attributes
        // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
        // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
        var modal = $(this);
        modal.find('.modal-title').text('编辑：' + recipient);
        modal.find('.modal-body input').val("")
        /* IP地址 edit_ip
        *  MAC edit_mac
        *  CPU edit_cpu
        *  内存 edit_memnoy
        *  硬盘 edit_harddisk
        *  主机名 edit_name
        *  操作系统 edit_system
        *  宿主服务器 edit_hostname
        *  备注  edit_remarks
        */
        // 添加初始化数据框
        document.getElementById("edit_ip").value = document.getElementById(""+recipient+"_1").innerText;
        document.getElementById("edit_mac").value = document.getElementById(""+recipient+"_2").innerText;
        document.getElementById("edit_cpu").value = document.getElementById(""+recipient+"_4").innerText;
        document.getElementById("edit_memony").value = document.getElementById(""+recipient+"_5").innerText;
        document.getElementById("edit_harddisk").value = document.getElementById(""+recipient+"_6").innerText;
        document.getElementById("edit_name").value = document.getElementById(""+recipient+"_3").innerText;
        document.getElementById("edit_system").value = document.getElementById(""+recipient+"_8").innerText;
        document.getElementById("edit_hostname").value = document.getElementById(""+recipient+"_7").innerText;
        document.getElementById("edit_remarks").value = document.getElementById(""+recipient+"_9").innerText;
    });


    function editUser(){
        /* IP地址 edit_ip
        *  MAC edit_mac
        *  CPU edit_cpu
        *  内存 edit_memnoy
        *  硬盘 edit_harddisk
        *  主机名 edit_name
        *  操作系统 edit_system
        *  宿主服务器 edit_hostname
        *  备注  edit_remarks
        *  API ajax类型
        */
        var edit_ip = document.getElementById("edit_ip").value ;
        var edit_mac = document.getElementById("edit_mac").value ;
        var edit_cpu = document.getElementById("edit_cpu").value ;
        var edit_memony = document.getElementById("edit_memony").value ;
        var edit_harddisk = document.getElementById("edit_harddisk").value ;
        var edit_name = document.getElementById("edit_name").value ;
        var edit_system = document.getElementById("edit_system").value ;
        var edit_hostname = document.getElementById("edit_hostname").value ;
        var edit_remarks = document.getElementById("edit_remarks").value ;
        var api = '1'
        $.post("{% url 'index:virtualapi' %}",{'api':api,'ip':edit_ip,'mac':edit_mac,'cpu':edit_cpu,'memony':edit_memony,'harddisk':edit_harddisk,'name':edit_name,
            'system':edit_system,'hostname':edit_hostname,'remarks':edit_remarks},
            function(data,status){
                if (data.status == "200"){
                    document.getElementById(""+edit_mac+"_4").innerText = edit_cpu;
                    document.getElementById(""+edit_mac+"_5").innerText = edit_memony;
                    document.getElementById(""+edit_mac+"_6").innerText = edit_harddisk;
                    document.getElementById(""+edit_mac+"_3").innerText = edit_name;
                    document.getElementById(""+edit_mac+"_8").innerText = edit_system;
                    document.getElementById(""+edit_mac+"_7").innerText = edit_hostname;
                    alert(data.msg)
                }
    });
    }
    function UpdataUser(){
        /* IP地址 add_ip
        *  MAC add_mac
        *  CPU add_cpu
        *  内存 add_memnoy
        *  硬盘 add_harddisk
        *  主机名 add_name
        *  操作系统 add_system
        *  宿主服务器 add_hostname
        *  备注 add_remarks
        *  API ajax类型
        */
        var add_ip = document.getElementById("add_ip").value ;
        var add_mac = document.getElementById("add_mac").value ;
        var add_cpu = document.getElementById("add_cpu").value ;
        var add_memony = document.getElementById("add_memony").value ;
        var add_harddisk = document.getElementById("add_harddisk").value ;
        var add_name = document.getElementById("add_name").value ;
        var add_system = document.getElementById("add_system").value ;
        var add_hostname = document.getElementById("add_hostname").value ;
        var add_remarks = document.getElementById("add_remarks").value ;
        var api = '2'
        if (add_ip == ""){
            alert("请输入IP地址")
            return -1
        }
        if (add_mac == ""){
            alert("请输入MAC地址")
            return -1
        }
    $.post("{% url 'index:virtualapi' %}",{'api':api,'ip':add_ip,'mac':add_mac,'cpu':add_cpu,'memony':add_memony,'harddisk':add_harddisk,'name':add_name,
        'system':add_system,'hostname':add_hostname,'remarks':add_remarks},
        function(data,status){
            alert(data.msg)

    });
    }
    function crap(obj){
        var number = obj.id
        var api = '3'
        if (window.confirm('你确定要移出: ' + obj.id + '吗？')){
            $.post("{% url 'index:virtualapi' %}",{'api':api,'ip':number},function(data,status){
                window.location.reload(data);
        });
        }
    }

{% endblock script %}